<!--suppress ALL -->
<template>
  <div>
    <div id="myChart1" :style="{width: '1600px', height: '100vh',padding:'20px'}"/>
  </div>
</template>

<script>
var echarts = require('echarts');
import request from '@/utils/request';

export default {
  name: 'UserHistory',
  data() {
    return {
      chart: null,
      // echarts数据
      echartsData: {
        dimensions: ['url', 'webTime', 'serverTime'],
        source: []
      }
    };
  },
  mounted() {
    this.initCharts();
    this.fectchData();
  },

  methods: {
    initCharts() {
      this.chart = echarts.init(document.getElementById('myChart1'));
      this.setOptions();
    },
    setOptions() {
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        dataset: {
          dimensions: this.echartsData.dimensions,
          source: this.echartsData.source
        },
        calculable: true,
        xAxis: {
          position: 'top'
        },
        yAxis: { type: 'category', inverse: true },
        dataZoom: [
          {
            type: 'inside',
            yAxisIndex: [0]
          },
          {
            type: 'slider',
            yAxisIndex: [0]
          }
        ],
        series: [
          {
            name: '网络耗时',
            type: 'bar',
            stack: '总时长',
            encode: {
              x: 'webTime',
              y: 'url'
            }
          },
          {
            name: '服务器耗时',
            type: 'bar',
            stack: '总时长',
            encode: {
              x: 'serverTime',
              y: 'url'
            }
          }
        ]
      };
      this.chart.setOption(option);
    },
    // 分页改变
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.fectchData();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.fectchData();
    },
    fectchData() {
      request({
        url: '/v1/statistics/web/app/url',
        method: 'get',
        params: {
          currentPage: this.page.currentPage,
          pageSize: this.page.pageSize
        }
      }).then(response => {
        this.echartsData.source = response.data.rows;
        this.page.total = response.data.total;
        this.setOptions();
      });
    }
  }
};
</script>

<style scoped>
  .components-container {
    position: relative;
    height: 100vh;
    padding: 20px;
  }
</style>
